<template>
	<div>
		<h3>发表评论</h3>
		<hr>
		<textarea placeholder="请输入您要评论的内容（最多评论120字）" maxlength="120" v-model="msg"></textarea>
		<mt-button type="primary" size="large" @click='postComment'>发表评论</mt-button>
		<div class="cmt-container">
			<div class="cmt-item" v-for="(item,index) in comments.commit" :key='index'>
				<div class="cmt-title">
					第{{ index+1 }}楼&nbsp;&nbsp;用户：{{ item.name }}&nbsp;&nbsp;发表时间：{{ item.add_time }}
				</div>
				<div class="cmt-body">
					{{ item.content }}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'
	export default {
		data() {
			return {
				comments: [],
				msg: ''
			}
		},
		created() {
			this.getComments();
		},
		methods: {
			getComments() {
				this.$http.get('data.php').then(result => {
					if(result.body.status == true) {
						//											console.log(result.body.news_datas)
						this.comments = result.body.news_datas[this.id];
						console.log(this.comments.commit)
					} else {
						Toast('获取评论信息失败...');
					}
				})
			},
			postComment() {
				if(this.msg.trim().length === 0) {
					return Toast("评论内容不能为空");
				}
				var cmt = {
					name: "匿名用户",
					add_time: Date.now(),
					content: this.msg.trim()
				};
				this.comments.commit.unshift(cmt);
				this.msg = '';
			}
		},
		props: ["id"]
	};
</script>

<style lang="scss" scoped>
	h3 {
		font-size: 15px;
		font-weight: normal;
	}
	
	textarea {
		font-size: 13px;
	}
	
	.cmt-container {
		margin-top: 8px;
		font-size: 12px;
		.cmt-item {
			.cmt-title {
				background: #ccc;
				padding-left: 10px;
			}
			.cmt-body {
				padding: 8px 10px;
				background: #efeff4;
			}
		}
	}
</style>